import React, { Component } from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet, PixelRatio, } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class TitleCpt extends Component {
	constructor(props) {
		super(props);
	}

	render () {
		let { data } = this.props;
		return (
			<View  style={styles.orderTitlebox}>
				<View  style={styles.orderTitleboxActive}>
					<Text style={styles.orderTitle}>{data.title || ''}</Text>
					<View style={styles.orderTitleRight}>
						<Text onPress={() => { data._rightFn && data._rightFn() }} style={styles.more}>{data.rightText || ''}</Text>
						<Text onPress={() => { data._moreFn && data._moreFn() }} style={styles.more}>{data.moreText || ''}</Text>
					</View >
				</View >
			{data.info ? <Text style={[styles.info,styles.infoActive]}>{data.info}</Text> : null}
			</View>
			)
	}
}

const styles = StyleSheet.create({
	orderTitlebox: {
		marginLeft: 13 * scale,
		marginRight: 10 * scale,
		marginBottom: 5 * scale,
		paddingBottom: 10 * scale,
		paddingTop: 10 * scale,
		borderBottomWidth: 2 * scale,
		borderBottomColor: '#eee',
	},
	orderTitleboxActive: {
		flexDirection: 'row',
		justifyContent: 'space-between',
	},
	orderTitle: {
		fontSize: 16 * scale,
		color: '#272727',
		fontWeight: 'bold'
	},
	orderTitleRight: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	more: {
		color: style.color.themeColor,
		marginLeft: 15 * scale
	},
	info: {
		fontSize: 10 * scale,
		color: 'red',
		paddingLeft: 5 * scale
	},
	infoActive:{
		paddingTop:3*scale
	}
})